<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title></title>
<link href="css/reset.css" rel="stylesheet" type="text/css" />
<link href="css/style.css" rel="stylesheet" type="text/css" />
<link href="css/jquery.mCustomScrollbar.css" rel="stylesheet" />
<style>
        .content{margin:40px; width:260px; height:500px; padding:20px; overflow:auto; background:#333; -webkit-border-radius:3px; -moz-border-radius:3px; border-radius:3px;}
</style>
<script src="jquery-1.10.1.js" language="javascript" type="text/javascript"></script>

<!--<script src="js/jquery-1.7.min.js" language="javascript" type="text/javascript"></script>-->
<script src="jquery.tab.js" language="javascript" type="text/javascript"></script>
<script type="text/javascript">
    $(function() {

        $(".icon-double-angle-left").click(function() {
            $(".sidebar").toggleClass("menu-min");
            hidFrame();
        });

        $(".dropdown-toggle").click(function() {
            $(this).parent().toggleClass("active").siblings().removeClass("active");
        });

        window.createScroll();

        $("#sidebar").tab({
            tabId: ".sidebar-shortcuts-large",
            tabTag: "button",
            conId: "#sidebar .bd",
            conTag: ".nav-list"
        });

        $("#sidebar").tab({
            tabId: ".sidebar-shortcuts-mini",
            tabTag: "span",
            conId: "#sidebar .bd",
            conTag: ".nav-list"
        });
    })
</script>

<script type="text/javascript" language="javascript" > 
    var currentChoice = true;

    function hidFrame() {
        var fs = window.parent.document.getElementsByTagName("frameset");
        if (currentChoice) {
            //document.getElementById("my_menu").style.display="none";
            fs[1].cols = "43,*";
        } else {
            //document.getElementById("my_menu").style.display="block";
            fs[1].cols = "151,*";
        }
        currentChoice = !currentChoice;
    }
</script>

<link rel="stylesheet" href="css/fontello.css">
<link rel="stylesheet" href="css/animation.css">
<!--[if IE 7]>
<link rel="stylesheet" href="css/fontello-ie7.css">
<![endif]-->
<script>
    function toggleCodes(on) {
        var obj = document.getElementById('icons');

        if (on) {
            obj.className += ' codesOn';
        } else {
            obj.className = obj.className.replace(' codesOn', '');
        }
    }
</script>
</head>

<body>
<div id="sidebar" class="sidebar">

  <div class="sidebar-shortcuts-large">
  <button class="btn btn-small btn-success"><i class="icon-user-1" style="font-size:30px; margin-left:6px;" title="个人申请"></i></button>
  <button class="btn btn-small btn-info"><i class="icon-users" style=" font-size:30px; margin-left:6px;" title="管理权限"></i></button>
  </div>
  
  <div class="sidebar-shortcuts-mini"> 
  <span class="btn btn-success"></span> 
  <span class="btn btn-info"></span> 
  </div>
  
   <div id="content_1" class="content">
  <div class="bd">
  
    <ul class="nav nav-list">
      <li> <a href="#" class="dropdown-toggle"> 
      <i class="icon-torso"></i> <span class="menu-text">个人办公</span> 
      <b class="arrow icon-angle-down"></b> 
      </a>
        <ul class="submenu">
          <li> <a href="#"> <i class="icon-double-angle-right"></i>个人办公2</a> </li>
          <li> <a href="#"> <i class="icon-double-angle-right"></i>个人办公2</a> </li>
          <li> <a href="#"> <i class="icon-double-angle-right"></i>个人办公2</a> </li>
        </ul>
      </li>
      
      <li> <a href="#" class="dropdown-toggle"> 
      <i class=" icon-edit"></i> <span class="menu-text">我的绩效</span> 
      <b class="arrow icon-angle-down"></b> 
      </a>
        <ul class="submenu">
          <li> <a href="#"> <i class="icon-double-angle-right"></i>个人办公2</a> </li>
          <li> <a href="#"> <i class="icon-double-angle-right"></i>个人办公2</a> </li>
          <li> <a href="#"> <i class="icon-double-angle-right"></i>个人办公2</a> </li>
        </ul>
      </li>
      
      <li> <a href="#" class="dropdown-toggle"> 
      <i class=" icon-cogs"></i> <span class="menu-text">个人中心</span> 
      <b class="arrow icon-angle-down"></b> 
      </a>
        <ul class="submenu">
          <li> <a href="#"> <i class="icon-double-angle-right"></i>个人办公2</a> </li>
          <li> <a href="#"> <i class="icon-double-angle-right"></i>个人办公2</a> </li>
          <li> <a href="#"> <i class="icon-double-angle-right"></i>个人办公2</a> </li>
        </ul>
      </li>
      
       <li> <a href="#" class="dropdown-toggle"> 
      <i class=" icon-list-alt"></i> <span class="menu-text">公共信息</span> 
      <b class="arrow icon-angle-down"></b> 
      </a>
        <ul class="submenu">
          <li> <a href="#"> <i class="icon-double-angle-right"></i>个人办公2</a> </li>
          <li> <a href="#"> <i class="icon-double-angle-right"></i>个人办公2</a> </li>
          <li> <a href="#"> <i class="icon-double-angle-right"></i>个人办公2</a> </li>
        </ul>
      </li>
      
      <li> <a href="#" class="dropdown-toggle"> 
      <i class="icon-docs"></i> <span class="menu-text">Sunwin文件</span> 
      <b class="arrow icon-angle-down"></b> 
      </a>
        <ul class="submenu">
          <li> <a href="#"> <i class="icon-double-angle-right"></i>个人办公2</a> </li>
          <li> <a href="#"> <i class="icon-double-angle-right"></i>个人办公2</a> </li>
          <li> <a href="#"> <i class="icon-double-angle-right"></i>个人办公2</a> </li>
        </ul>
      </li>
      
      <li> <a href="#" class="dropdown-toggle"> 
      <i class=" icon-calendar"></i> <span class="menu-text">考勤异常</span> 
      <b class="arrow icon-angle-down"></b> 
      </a>
        <ul class="submenu">
          <li> <a href="#"> <i class="icon-double-angle-right"></i>个人办公2</a> </li>
          <li> <a href="#"> <i class="icon-double-angle-right"></i>个人办公2</a> </li>
          <li> <a href="#"> <i class="icon-double-angle-right"></i>个人办公2</a> </li>
        </ul>
      </li>
      
      <li> <a href="#" class="dropdown-toggle"> 
       <i class=" icon-chat-2"></i> <span class="menu-text">内部交流</span> 
      <b class="arrow icon-angle-down"></b> 
      </a>
        <ul class="submenu">
          <li> <a href="#"> <i class="icon-double-angle-right"></i>个人办公2</a> </li>
          <li> <a href="#"> <i class="icon-double-angle-right"></i>个人办公2</a> </li>
          <li> <a href="#"> <i class="icon-double-angle-right"></i>个人办公2</a> </li>
        </ul>
      </li>
      
      <li> <a href="#" class="dropdown-toggle"> 
       <i class="icon-wrench-1"></i> <span class="menu-text">常用工具</span> 
      <b class="arrow icon-angle-down"></b> 
      </a>
        <ul class="submenu">
          <li> <a href="#"> <i class="icon-double-angle-right"></i>个人办公2</a> </li>
          <li> <a href="#"> <i class="icon-double-angle-right"></i>个人办公2</a> </li>
          <li> <a href="#"> <i class="icon-double-angle-right"></i>个人办公2</a> </li>
        </ul>
      </li>
      
    </ul>
    
    <ul class="nav nav-list">
       <li> <a href="#" class="dropdown-toggle"> 
       <i class="icon-volume-up-1"></i> <span class="menu-text">内部交流</span> 
      <b class="arrow icon-angle-down"></b> 
      </a>
        <ul class="submenu">
          <li> <a href="#"> <i class="icon-double-angle-right"></i>个人办公2</a> </li>
          <li> <a href="#"> <i class="icon-double-angle-right"></i>个人办公2</a> </li>
          <li> <a href="#"> <i class="icon-double-angle-right"></i>个人办公2</a> </li>
        </ul>
      </li>
   
      <li> <a href="#"> <i class="icon-users-1"></i> <span class="menu-text">人事管理</span> </a> </li>
      <li> <a href="#"> <i class="icon-doc-text"></i> <span class="menu-text">用车管理</span> </a> </li>
      <li> <a href="#"> <i class="icon-monitor-1"></i> <span class="menu-text">IT管理</span> </a> </li>
      <li> <a href="#"> <i class="icon-home-1"></i> <span class="menu-text">ifamily门店管理</span> </a> </li>
      <li> <a href="#"> <i class="icon-home-5"></i> <span class="menu-text">ibaby门店管理</span> </a> </li>
      <li> <a href="#"> <i class="icon-book-open"></i> <span class="menu-text">店员档案管理</span> </a> </li>
      <li> <a href="#"> <i class="icon-list-numbered"></i> <span class="menu-text">岗位管理</span> </a> </li>
      <li> <a href="#"> <i class="icon-tags"></i> <span class="menu-text">行政设备管理</span> </a> </li>
      <li> <a href="#"> <i class="icon-laptop"></i> <span class="menu-text">IT设备管理</span> </a> </li>
      <li> <a href="#"> <i class="icon-desktop-1"></i> <span class="menu-text">IT保修管理</span> </a> </li>
      <li> <a href="#"> <i class=" icon-group"></i> <span class="menu-text">新人入职管理</span> </a> </li>
      <li> <a href="#"> <i class="icon-calendar"></i> <span class="menu-text">考勤管理</span> </a> </li>
      <li> <a href="#"> <i class="icon-tags-1"></i> <span class="menu-text">ifamily设备管理</span> </a> </li>
      <li> <a href="#"> <i class="icon-desktop"></i> <span class="menu-text">营运设备管理</span> </a> </li>
      <li> <a href="#"> <i class="icon-dollar"></i> <span class="menu-text">话费管理</span> </a> </li>
      <li> <a href="#"> <i class="icon-credit-card"></i> <span class="menu-text">薪资管理</span> </a> </li>
      <li> <a href="#"> <i class="icon-mobile-2"></i> <span class="menu-text">短信管理</span> </a> </li>
      <li> <a href="#"> <i class="icon-book"></i> <span class="menu-text">ERP基础资料</span> </a> </li>
      <li> <a href="#"> <i class="icon-grid"></i> <span class="menu-text">信息管理</span> </a> </li>
      <li> <a href="#"> <i class="icon-user-add"></i> <span class="menu-text">招募申请管理</span> </a> </li>
      <li> <a href="#"> <i class="icon-t-shirt"></i> <span class="menu-text">面料管理</span> </a> </li>
      <li> <a href="#"> <i class=" icon-paste"></i> <span class="menu-text">长假/离岗交接</span> </a> </li>
      <li> <a href="#"> <i class="icon-clock"></i> <span class="menu-text">请假管理</span> </a> </li>
      <li> <a href="#"> <i class=" icon-chat-1"></i> <span class="menu-text">会议管理</span> </a> </li>
      <li> <a href="#"> <i class="icon-truck"></i> <span class="menu-text">物流追踪</span> </a> </li>
      <li> <a href="#"> <i class="icon-th-large"></i> <span class="menu-text">预约管理</span> </a> </li>
      <li> <a href="#"> <i class="icon-edit-alt"></i> <span class="menu-text">在线问卷\试卷</span> </a> </li>
      <li> <a href="#"> <i class="icon-users-1"></i> <span class="menu-text">面试系统</span> </a> </li>
      <li> <a href="#"> <i class="icon-briefcase"></i> <span class="menu-text">加班管理</span> </a> </li>
      <li> <a href="#"> <i class="icon-edit-1"></i> <span class="menu-text">在线学习管理</span> </a> </li>
      <li> <a href="#"> <i class="icon-flight"></i> <span class="menu-text">出差管理</span> </a> </li>
      <li> <a href="#"> <i class="icon-export"></i> <span class="menu-text">问题反馈管理</span> </a> </li>
      <li> <a href="#"> <i class="icon-doc-remove"></i> <span class="menu-text">Offer管理</span> </a> </li>
      <li> <a href="#"> <i class="icon-list-alt"></i> <span class="menu-text">审批权管理</span> </a> </li>
      <li> <a href="#"> <i class="icon-wrench-3"></i> <span class="menu-text">系统管理</span> </a> </li>
      <li> <a href="#"> <i class="icon-torso"></i> <span class="menu-text">员工转正管理</span> </a> </li>
      <li> <a href="#"> <i class="icon-mail-4"></i> <span class="menu-text">邮件管理</span> </a> </li>
      <li> <a href="#"> <i class="icon-newspaper-1"></i> <span class="menu-text">员工须知</span> </a> </li>
    </ul>
    
  </div>
  </div>
  <!--/.nav-list-->
  
  <div class="sidebar-collapse" id="sidebar-collapse"> 
  <i class="icon-double-angle-left"></i> 
  </div>
</div>


	<script src="js/jquery.mCustomScrollbar.concat.min.js"></script>
	<script>
		(function($){
			window.createScroll = function(){
        //#sidebar .bd
				$("#content_1").mCustomScrollbar({
					set_width:false, /*optional element width: boolean, pixels, percentage*/
					set_height:false, /*optional element height: boolean, pixels, percentage*/
					horizontalScroll:false, /*scroll horizontally: boolean*/
					scrollInertia:950, /*scrolling inertia: integer (milliseconds)*/
					mouseWheel:true, /*mousewheel support: boolean*/
					mouseWheelPixels:"auto", /*mousewheel pixels amount: integer, "auto"*/
					autoDraggerLength:true, /*auto-adjust scrollbar dragger length: boolean*/
					autoHideScrollbar:false, /*auto-hide scrollbar when idle*/
					scrollButtons:{ /*scroll buttons*/
						enable:false, /*scroll buttons support: boolean*/
						scrollType:"continuous", /*scroll buttons scrolling type: "continuous", "pixels"*/
						scrollSpeed:"auto", /*scroll buttons continuous scrolling speed: integer, "auto"*/
						scrollAmount:40 /*scroll buttons pixels scroll amount: integer (pixels)*/
					},
					advanced:{
						updateOnBrowserResize:true, /*update scrollbars on browser resize (for layouts based on percentages): boolean*/
						updateOnContentResize:true, /*auto-update scrollbars on content resize (for dynamic content): boolean*/
						autoExpandHorizontalScroll:false, /*auto-expand width for horizontal scrolling: boolean*/
						autoScrollOnFocus:true, /*auto-scroll on focused elements: boolean*/
						normalizeMouseWheelDelta:false /*normalize mouse-wheel delta (-1/1)*/
					},
					contentTouchScroll:true, /*scrolling by touch-swipe content: boolean*/
					callbacks:{
						onScrollStart:function(){}, /*user custom callback function on scroll start event*/
						onScroll:function(){}, /*user custom callback function on scroll event*/
						onTotalScroll:function(){}, /*user custom callback function on scroll end reached event*/
						onTotalScrollBack:function(){}, /*user custom callback function on scroll begin reached event*/
						onTotalScrollOffset:0, /*scroll end reached offset: integer (pixels)*/
						onTotalScrollBackOffset:0, /*scroll begin reached offset: integer (pixels)*/
						whileScrolling:function(){} /*user custom callback function on scrolling event*/
					},
					theme:"dark" /*"light", "dark", "light-2", "dark-2", "light-thick", "dark-thick", "light-thin", "dark-thin"*/
				});
			};
			//$(window).load(window.createScroll);
		})(jQuery);
	</script>

</body>
</html>
